let $info=$('.info');
let id=getQueryString('couponId')
let $li=$('.li')
let $content=$('.content')
let $cancel=$('.cancel')
let imgLength

let init={
    url:'http://chst.vip:1234/api/getcouponproduct?couponid=' + id ,
    success:show
}

function show (res) {
    let infoStr=''
    let imgStr=''
    let i=0;
    res.result.forEach(element => {
        let regExp = /^<[^<]+\s+src="([^''""]*)"/
        let imgUrl=element.couponProductImg.match(regExp)
        imgStr+=`
        <img id=${i} src='${imgUrl[1]}' alt=''> `
        infoStr +=`
        <li id=${element.couponProductId}>
        <a href=''>

        <div id='img'>
        <img src='${imgUrl[1]}' alt=''>
        </div>

        <div class='infoR'>

        <div class='title'>
        <h4>${element.couponProductName}</h4>
        </div>

        <div class='other'>
        <h4 class='price'>${element.couponProductPrice}</h4>
        <div class='mall'>${element.couponProductTime}</div>
        </div>
        </div>
        </a>
        </li>`
        i++
    });
    $info.append(infoStr)
    $li.append(imgStr)
    imgLength=$li.children().length
}
ajaxAPI(init)

let flag=$content.attr('flag')

$info.on('click','li',function(e){
    let id=$(this).attr('id')
    $('.carousel img').eq(id).show().siblings().hide()
    $content.attr('flag',true).css({
        display:'block'
    })
    $content.animate({
        top:e.pageY-150,
        left:100
    },500)
    e.preventDefault()
})



$cancel.on('click',function(){
    if($cancel.text()=='隐藏'){
        $content.hide(400)
        //$cancel.text('显示')
    }else{
        $content.show(400)
        $cancel.text('隐藏')
    }
})



let i=0
function run() {
    //获取下标为i的图片，让下标为i的图片显示，其他图片隐藏
    $('.carousel img').eq(i).show().siblings().hide()
    //获取轮播图小标为i的小长方形按铃，给i下标的按钮类名为active，删除其他元素类名active
    $('.item ul li').eq(i).addClass('active').siblings().removeClass('active')
}

function times() {//每两秒执行一次run函数
    return setInterval(()=>{
        if(++i===imgLength){
            i=0
        }
        run()
    },1000000000)

}

let timer=times()//调用
//获取轮播图小按钮，绑定鼠标事件
$('.item ul li').mouseenter(function(){
    clearInterval(timer)//清除计时器
    i=$(this).index()//获取当前鼠标所在的按钮下
    run()
})
//获取轮播小按钮 绑定鼠标离开事件，当鼠标离开后重新启动定时器
$('.item ul li').mouseleave(function(){
    timer
    

})

//左边<,点击图片向左轮播
$('.left').click(function(){
clearInterval(timer)
if(--i<0){
    i=imgLength-1
}
run()
timer=times()
})

  //右边>,点击后图片向右边轮播
  $('.right').click(function(){
      clearInterval(timer)
      if(++i===imgLength){
          i=0
      }
      run()
      timer=times()
  })      
        
        

       
